<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-3.3.7/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <title>基础数据列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 基础数据管理 <span
        class="c-gray en">&gt;</span> 基础数据列表</nav>

<span id="toolbar">
    <!--<button onclick="baseData_delete_by_batch();" class="btn btn-danger"><span   class="glyphicon glyphicon-trash"></span>批量删除</button>-->
    <button onclick="baseData_insert()" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>添加基础数据</button>
</span>



<div class="page-container">
<!--bootstrap-table-->
    <table id="dataTable"></table>

</div>
<script type="text/javascript" th:src="@{/lib/jquery-1.11.3/jquery.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>


<script type="text/javascript">
    $(function () {
        /*初始化bootstrap-table表格插件*/
        $('#dataTable').bootstrapTable({
            url: 'baseData/list', //加载数据地址
            pagination: true,//是否显示分页条
            search: true,//是否显示搜索框
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            pageNumber: 1,//默认的页面 第一页
            pageSize: 10,//默认的每页条数
            pageList:[10,25,50,100],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            /*列*/
            columns: [
            /*{ checkbox: true},*///是否显示前台的复选框（多选）
            {
                field: 'base_id', //后台返回的json格式的key
                title: '基础数据ID' //显示给用户的标题
            }, {
                field: 'base_name',
                title: '基础数据名称'
            }, {
                field: 'base_desc',
                title: '基础数据描述'
            },
                {
                    field: 'parentName',
                    title: '基础数据类别'
                },
            {
                field: 'base_id',
                title: '操作',
                align:'center',
                //格式化列
                formatter:operationFormatter
            }
            ],
            /*条件搜索和分页ajax出发传递参数设置
            * 匿名函数就是每次分页或者搜索触发函数
            * 返回值就是要传递给后台的参数
            * params内置的默认参数
            * 开发者可以根据需求在函数内部组装参数传递给后台
            * */
            queryParams:function(params){
                console.log(params);

                var paramsData =  {
                    pageNum: params.offset / params.limit + 1,
                    pageSize: params.limit,
                    keyword: params.search
                };

                return paramsData;

            }
        })

    })

    /**
     *  value: the field value. baseId的值
        row: the row record data. 当前行的数据
        index: the row index. 行号索引从0开始
        field: the row field. 当前field的名称 baseId

        函数直接返回一个html字符串，自动渲染出效果
     */
    function operationFormatter(value,row,index,field){
        var html = "<span onclick='baseData_del("+value+")' style='color: red;cursor: pointer' class='glyphicon glyphicon-trash'></span>&nbsp;&nbsp;&nbsp;";
        html += "<span onclick='baseData_update("+value+")' style='color: orange;cursor: pointer' class='glyphicon glyphicon-pencil'></span>";
        return html;
    }

</script>

<script type="text/javascript">


    /*基础数据-删除*/
    function baseData_del(baseId) {
        layer.confirm('确认要删除吗？', {icon: 3, title:'温馨提示'}, function (index) {
            $.get("baseData/delete?baseId="+baseId,function(data){
                layer.msg(data.msg, {
                    icon: data.code,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //如果删除生成code==1 刷新BootStrapTable表格，失败就刷新
                   if(data.code == 1){
                      refreshTable();
                   }
                });

            })

        });
    }


    /*刷新表格函数*/
    function refreshTable(){
        //BootStrapTable刷新表格的方法
        $("#dataTable").bootstrapTable('refresh');
    }


    /*基础数据-新增跳转*/
    function baseData_insert() {

        layer.open({
            type: 2,
            title: "新增基础数据",
            shade: [0],
            maxmin:true,
            area: [$(window).width()+'px', $(window).height()+'px'],
            content: "baseData/baseDataEdit", //iframe的url，no代表不显示滚动条
        });

    }

    /*基础数据-修改跳转*/
    function baseData_update(baseId) {

        layer.open({
            type: 2,
            title: "修改基础数据",
            shade: [0],
            maxmin:true,
            area: [$(window).width()+'px', $(window).height()+'px'],
            content: "baseData/baseDataEdit?baseId="+baseId, //iframe的url，no代表不显示滚动条
        });

    }

</script>
</body>
</html>